<template>
    <view class="myFollowing">
        <Navigation title="我的粉丝" background="#fff" />
        <view class="f ai-c fc-s-b ph-24 pv-32" v-for="(item, index) in list" :key="index">
            <view class="f ai-c mr-32 f1">
                       <image :src="item.avatar" class="w-100 h-100 b-100 mr-24"></image>
                <view class="f f1 fd-c">
                    <view class="f ai-c">
                        <view class="fs-32 fw-600 text-color4 name text-ellipsis-1">{{item.nickname?item.nickname:'匿名用户'}}</view>
                        <view class="f ai-c jc-c h-32 fs-22 text-color5 ml-12 create b-4 w-82">创作者</view>
                        <!-- <view class="f ai-c jc-c h-32 fs-22 text-color5 ml-12 official b-4 w-60">官方</view> -->
                    </view>
                    
					<view class="mt-8 f">
					    <view class="fs-24 text-color3 mr-24">
					        <text>点赞：</text>
					        <text class="text-color4">{{item.likedCount||0}}</text>
					    </view>
					    <view class="fs-24 text-color3">
					        <text>粉丝：</text>
					        <text class="text-color4">{{item.fansCount||0}}</text>
					    </view>
					</view>
                </view>
            </view>
            <view class="w-118 h-56 b-4 f ai-c jc-c fs-26 text-color2 btn follow" @click='follow(item)'>回关</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh  } from '@dcloudio/uni-app';
import { dictDataType } from '@/services/api/dict';
import { useAuthStore } from '@/store/modules/auth';
import { fenPage,contentFollow } from '@/services/api/novice';
import { myFenCount } from '@/services/api/mine/index';
const authStore = useAuthStore();
const list = ref<any[]>([]);
const curt = ref(0);
const statusList = ref([]);
const listParams = ref<any>({
    pageNo: 1,
    pageSize: 10,
});
onLoad(() => {
	
    getList();
});
async function getList() {
    const { data } = await fenPage(listParams.value);
	data.forEach(async(item: any) => {
		let res = await myFenCount({ userId: item.id });
		item.likedCount = res.data.likedCount
		item.fansCount = res.data.fansCount
	});
    list.value = list.value.concat(data);
}
async function follow(item: any) {
	    await contentFollow({ userId: item.id });
	    uni.showToast({
	        title: '关注成功',
	        icon: 'none',
	    });
		setTimeout(function(){
			list.value = [];
			listParams.value.pageNo = 1;
			getList();
		},1000)
	}
	//下拉刷新
	onPullDownRefresh(() => {
	    list.value = [];
	    listParams.value.pageNo = 1;
	    getList();
	});
	//上拉加载
	onReachBottom(() => {
	    listParams.value.pageNo++;
	    getList();
	});
</script>
<style lang="scss" scoped>
.myFollowing {
    .btn {
        background: #f5f5f5;
    }
    .follow {
        background: #fabb3c;
        color: #fff;
    }
    .create {
        background: #4974f5;
    }
    .official {
        background: #fac519;
    }
    .name {
        max-width: 340rpx;
    }
}
</style>
